{% load static %}
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Allen监控系统{% endblock %}</title>
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{% url 'index' %}">Allen监控系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item dropdown" >
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
                           data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-server"></i>
                            设备管理
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="{% url 'host_list' %}">
                                <i class="fas fa-desktop"></i>
                                主机管理
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'network_device_list' %}">
                                <i class="fas fa-network-wired"></i>
                                网络设备管理
                            </a></li>                       
                        </ul>
                    </li>
                    
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="idcDropdown" role="button" 
                           data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-building"></i>
                            机房管理
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="idcDropdown">
                            <li><a class="dropdown-item" href="{% url 'idc_list' %}">
                                <i class="fas fa-warehouse"></i>
                                机房列表
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'topology' %}">
                                <i class="fas fa-project-diagram"></i>
                                网络拓扑
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'asset_management' %}">
                                <i class="fas fa-boxes"></i>
                                资产管理
                            </a></li>
                        </ul>
                    </li>
                    
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'dashboard' %}">
                            <i class="fas fa-tachometer-alt"></i>
                            大屏展示
                        </a>
                    </li>
                    
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'reports' %}">
                            <i class="fas fa-chart-bar"></i>
                            报表
                        </a>
                    </li>
                    
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'alerts' %}">
                            <i class="fas fa-bell"></i>
                            告警中心
                        </a>
                    </li>
                    
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button" 
                           data-bs-toggle="dropdown" aria-expanded="false">
                            <i class="fas fa-cog"></i>
                            系统设置
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="settingsDropdown">
                            <li><a class="dropdown-item" href="{% url 'user_management' %}">
                                <i class="fas fa-users"></i>
                                用户管理
                            </a></li>
                            <li><a class="dropdown-item" href="{% url 'alert_notification' %}">
                                <i class="fas fa-bell-slash"></i>
                                配置告警通知
                            </a></li>
                        </ul>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <span class="nav-item nav-link text-light">欢迎, {{ request.user.username }}</span>
                    <a class="nav-link" href="{% url 'logout' %}">退出</a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>

    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  

    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var dropdowns = document.querySelectorAll('.dropdown-toggle');
            dropdowns.forEach(function(dropdown) {
                new bootstrap.Dropdown(dropdown);
            });
        });
    </script>
    
    {% block extra_js %}{% endblock %}
